<template>
  <div id="personalNicknameModify">
    <!-- input -->
    <section class="nickNameContainer">
      <div class="nicnNameBox">
        <el-input
          ref="nicknameIpt"
          v-model="nickname"
          placeholder="请输入昵称"
          maxlength="15"
          @input="nicknameInputing"
          onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\-\——\=\;\@\!\+\$\_]/g,'')"
          onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\-\——\=\;\@\!\+\$\_]/g,'')"
          oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\-\——\=\;\@\!\+\$\_]/g,'')"
        >
        </el-input>
        <div class="clearBox" v-show="nickname.length > 0" @click.stop="clear">
          <img
            class="clear"
            src="@/assets/images/mobile_black/login/clear.png"
          />
        </div>
      </div>

      <p class="nickNameTip">昵称最多不可超过15个字符</p>
    </section>

    <!-- button -->
    <section class="saveBtnContainer">
      <el-button
        v-if="isCodeBtnDisabled"
        :disabled="isCodeBtnDisabled"
        class="saveBtn btn_grey"
        @click="saveBtn"
        >保存</el-button
      >
      <el-button
        v-else
        class="saveBtn btn_color"
        @click="saveBtn"
        :disabled="isCodeBtnDisabled"
        >保存</el-button
      >
    </section>
  </div>
</template>

<script>
import { updateProfileApi } from "@/api";
import { iscode, reHeight } from "@/utils";
import { mapState, mapActions } from "vuex";

export default {
  name: "PersonalNicknameModify",
  data() {
    return {
      // nickName
      nickname: "",
      // btn disabled
      isCodeBtnDisabled: true,
    };
  },
  computed: {
    // 获取用户信息
    ...mapState(["userInfo"]),
  },
  mounted() {
    // 一进来就给data数据
    this.nickname = this.userInfo.nickname;

    // 解决软键盘的问题
    reHeight("personalNicknameModify", this);
  },
  // 解决键盘没收起就返回到修改资料界面布局白色
  beforeRouteLeave(to, from, next) {
    this.$nextTick(() => {
      this.$refs.nicknameIpt.blur();
    });
    setTimeout(() => {
      next();
    }, 100);
  },
  methods: {
    // ------ vuex ------
    // 获取用户信息（用于认证之后更新vuex里的userInfo数据）
    ...mapActions(["getUserInfo"]),

    // ------ 异步相关的方法 ------
    // 保存修改
    async updateProfile() {
      let result = await updateProfileApi({
        nickname: this.nickname.trim(),
      });
      if (iscode(result)) {
        // 更新vuex里的用户数据
        this.getUserInfo();
        this.$toast({
          className: "authentication_ok",
          message: "保存成功",
          duration: 2000,
          icon: "passed",
        });
        this.$router.push("/personalModify");
      }
    },

    // -----功能性方法-----
    // 点击按钮保存信息需改
    saveBtn() {
      this.updateProfile();
    },
    // 正在输入
    nicknameInputing() {
      if (this.nickname.length <= 15 && this.nickname.length > 0) {
        this.isCodeBtnDisabled = false;
      } else {
        this.isCodeBtnDisabled = true;
      }
    },
    // 清空输入框
    clear() {
      this.nickname = "";
      this.isCodeBtnDisabled = true;
    },
  },
};
</script>

<style lang="less" scoped>
#personalNicknameModify {
  // -nickName
  .nickNameContainer {
    width: 100%;
    padding-left: 30px;
    padding-top: 30px;

    // input
    /deep/.el-input {
      width: 100%;
      height: 100px;
      background: #1e2020;
      box-shadow: 0px 2px 0px 0px #333333;
    }
    /deep/.el-input__inner {
      width: 100%;
      height: 100%;
      background: none;
      border: none;
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #444444;
      color: #ffffff;
      line-height: 30px;
      padding-left: 0;
    }

    .nicnNameBox {
      position: relative;

      // clear
      .clearBox {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 100px;
        width: 88px;
        z-index: 999;

        .clear {
          width: 28px;
          height: 28px;
        }
      }
    }

    // tip
    .nickNameTip {
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 24px;
      margin-top: 40px;
    }
  }

  // -saveBtn
  .saveBtnContainer {
    width: 100%;
    padding: 0 30px;
    margin-top: 100px;

    // btn
    .saveBtn {
      width: 100%;
      height: 72px;
      font-size: 32px;
      font-family: Microsoft YaHei;
      border-radius: 0;
      color: #2b2c2d;
      font-weight: 500;
      border: none;
      background: none;
      background-position: center center;
      background-size: 100% 100%;
    }

    .btn_color {
      background-image: url("../../../assets/images/mobile_black/home/btn_color.png");
    }
    .btn_grey {
      background-image: url("../../../assets/images/mobile_black/home/btn_grey.png");
    }
  }
}
</style>
